<!-- eslint-disable vue/html-indent -->
<template>
  <div class="w-1/1 h-1/1 flex justify-center items-center custom-card">
    <el-card
      class="w-95/100 h-95/100"
      :shadow="componentProps.shadow as any"
      :style="cardStyle"
    ></el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElCard } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'opacity',
      transform: 'number',
      defaultValue: 100,
      updateInterval: 0
    })
  },
  shadow: {
    type: String,
    default: 'always'
  },
  backGroundColor: {
    type: String,
    default: '#ffffff'
  },
  boxShadow: {
    type: String,
    default: '#ffffff'
  },
  opacity: {
    type: Number,
    default: 100
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  shadow: props.shadow,
  backGroundColor: props.backGroundColor,
  boxShadow: props.boxShadow,
  opacity: props.opacity
});

// 使用数据绑定（hide属性由render-core处理，组件跳过）
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';

const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听props变化，同步到响应式属性对象
watch(
  () => props.shadow,
  (newValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'shadow') {
      componentProps.value.shadow = newValue;
    }
  }
);

watch(
  () => props.backGroundColor,
  (newValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'backGroundColor') {
      componentProps.value.backGroundColor = newValue;
    }
  }
);

watch(
  () => props.boxShadow,
  (newValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'boxShadow') {
      componentProps.value.boxShadow = newValue;
    }
  }
);

watch(
  () => props.opacity,
  (newValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'opacity') {
      componentProps.value.opacity = newValue;
    }
  }
);

const cardStyle = computed(() => ({
  'background-color': componentProps.value.backGroundColor,
  opacity: componentProps.value.opacity / 100
}));

defineExpose({
  componentProps
});
</script>
<style lang="less">
.custom-card {
  .el-card.is-always-shadow {
    box-shadow: v-bind('`0px 0px 12px ${componentProps.boxShadow}`') !important;
  }
  .el-card.is-hover-shadow:hover {
    box-shadow: v-bind('`0px 0px 12px ${componentProps.boxShadow}`') !important;
  }
}
</style>
